<template>
  <div style="width: auto; height: 270px" id="echarts2"></div>
</template>

<script>
import * as echarts from "echarts";
const colors = ["#5470C6", "#EE6666"];
import { listEcharts3 } from "@/api/echarts/echarts";

export default {
  name: "echarts2",
  data() {
    return {
      // option配置
      option: {
        title: {
          text: "执行次数",
          subtext: "",
          left: "center",
          textStyle: {
            color: "#FFFFFF",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            color: "#FFFFFF",
          },
        },
        series: [
          {
            name: "结果",
            type: "pie",
            radius: "50%",
            data: [], // 初始为空，将在获取数据后填充
            center: ["60%", "60%"], // 将图表向右边和下边移动
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              show: true,
              position: "outside",
              textStyle: {
                color: "#FFFFFF",
              },
            },
          },
        ],
      },
      loading: false,
      categories: [],
      total: 0,
    };
  },
  mounted() {
    this.getHistory();
  },
  methods: {
    echartsInit() {
      // 在生命周期中挂载
      const chart = echarts.init(document.getElementById("echarts2"));
      chart.setOption(this.option);
      // 添加点击事件监听器
      chart.on("click", (params) => {
        if (params.seriesType === "pie") {
          const type = params.name;
          this.goToCategoryPage(type);
        }
      });
    },

    getHistory() {
      this.loading = true;
      listEcharts3()
        .then((response) => {
          console.log(response);
          if (response) {
            this.option.series[0].data = [
              { name: "成功", value: response.successCount },
              { name: "失败", value: response.failsCount },
            ];
            this.total = response.count;
            this.loading = false;
            this.echartsInit(); // 重新初始化图表
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
          this.loading = false;
        });
    },

    goToCategoryPage(type) {
      // 跳转到指定页面并传递参数
      this.$router.push({ path: "../executionHistory/executionHistory", query: { type: type } });
    },
  },
};
</script>

<style scoped></style>
